<template>
  <div>
      <div class="main">
          <p>用户登录</p>
  <Form ref="formInline" :model="user" >
        <FormItem prop="用户姓名">
            <Input type="text" v-model="user.Name" placeholder="用户姓名">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem prop="密码">
            <Input type="password" v-model="user.Password" placeholder="密码">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="login">登录</Button>
            <Button type="error" @click="jump('/getpsd')" style="margin-left: 50px">忘记密码</Button>
          <Button type="error" @click="jump('/register')" style="margin-left: 50px">注册</Button>
        </FormItem>
    </Form>
      </div>

  </div>
</template>

<script>
import api from '../../api/index.js'
  export default {
    name:'',
    data () {
      return {
          user:{
              Name:'',
              Password:''
          }
      };
    },
    mounted() {

    },
    methods: {
          //用户登录
         login (){
           if(!this.user.Name||!this.user.Password){
             this.$Notice.error({
               title: '参数错误',
               desc:'请输入用户名和用户密码'
             })
           }else {
             let data = {
               user_number:this.user.Name,
               password:this.user.Password
             };
             api.login(data).then(res=>{
               if(res.status==1&&res.data[0]){
                 let user = res.data[0];
                 this.$store.commit('set_user',user);
                 this.$router.push('/home');
               }else {
                 this.$Notice.error({
                   title: '登录失败',
                   desc:'请检查用户名和用户密码'
                 })
               }
             })
           }
         },
      //路由跳转
         jump(address){
            this.$router.push(address);
         }
    },
    watch: {
    },
  }
</script>
<style lang='' scoped>
.main{
    width: 600px;
    height: 400px;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -300px;
    margin-top: -200px;
    background: #f0faff;
    padding: 60px;
    box-shadow: 0 1px 6px rgba(0,0,0,.2);
    border-color: #eee;
}
p{
    margin-bottom: 20px
}
</style>
